<template>
  <div class="statement">
    <div class="up flex">
      <div class="data">
        <div class="title">近七天数据五项</div>
        <div class="chart">
          <BrokenColumn :option-data="SevenDayFinedata" />
        </div>
      </div>
      <div class="fine">
        <div class="title">近七天签收未达标预估罚款</div>
        <div class="flex">
          <div class="chart">
            <BrokenColumn :option-data="SevenDayFinedata" />
          </div>
          <div class="tips">
            <div>辽宁盘锦公司</div>
            <div class="detail">
              <Annulus :percentage="75" :width="108" :stroke-width="12" />
              <div class="text">罚款环比上周</div>
            </div>
            <div class="item">
              <div class="name">本周考核</div>
              <div class="number">95</div>
            </div>
            <div class="item">
              <div class="name">上周罚款</div>
              <div class="number">335</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="down flex">
      <div class="claim">
        <div class="title">近七天三件理赔账单</div>
        <div class="flex">
          <div class="chart">
            <BrokenColumn :option-data="SevenDayclaimdata" />
          </div>
          <div class="tips">
            <div>辽宁盘锦公司</div>
            <div class="detail">
              <Annulus :percentage="75" :width="108" :stroke-width="12" />
              <div class="text">罚款环比上周</div>
            </div>
            <div class="item">
              <div class="name">本周考核</div>
              <div class="number">95</div>
            </div>
            <div class="item">
              <div class="name">上周罚款</div>
              <div class="number">335</div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="SevenDayhonourdata != null" class="appoint">
        <div class="title flex">
          <div>近七天履约率</div>
          <SelectNetwork width="200" />
        </div>
        <div class="flex">
          <div class="item">
            <div class="title">履约完成率</div>
            <div class="chart">
              <div class="flex">
                <div>
                  <Annulus
                    :percentage="SevenDayhonourdata.lastWeekPerformance"
                    :width="100"
                    :stroke-width="12"
                  />
                  <div class="text">上周履约完成率</div>
                </div>
                <div>
                  <Annulus
                    :percentage="SevenDayhonourdata.thisWeekPerformance"
                    :width="100"
                    :stroke-width="12"
                    color="#F4B259"
                  />
                  <div class="text">当周履约完成率</div>
                </div>
              </div>
              <div class="rate">
                <div class="text">环比上周</div>
                <div class="score flex">
                  <Score :show-text="false" />
                  <div>{{ SevenDayhonourdata.contrastPerformance }}%↑</div>
                </div>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="title">达标通知率</div>
            <div class="chart">
              <div class="flex">
                <div>
                  <Annulus
                    :percentage="SevenDayhonourdata.lastWeekNotice"
                    :width="100"
                    :stroke-width="12"
                  />
                  <div class="text">上周达标通知率</div>
                </div>
                <div>
                  <Annulus
                    :percentage="SevenDayhonourdata.thisWeekNotice"
                    :width="100"
                    :stroke-width="12"
                    color="#F4B259"
                  />
                  <div class="text">当周达标通知率</div>
                </div>
              </div>
              <div class="rate">
                <div class="text">环比上周</div>
                <div class="score flex">
                  <Score :show-text="false" />
                  <div>{{ SevenDayhonourdata.contrastNotice }}%↑</div>
                </div>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="title">客户声音率</div>
            <div class="chart">
              <div class="flex">
                <div>
                  <Annulus
                    :percentage="SevenDayhonourdata.lastWeekVoice"
                    :width="100"
                    :stroke-width="12"
                  />
                  <div class="text">上周客户声音率</div>
                </div>
                <div>
                  <Annulus
                    :percentage="SevenDayhonourdata.thisWeekVoice"
                    :width="100"
                    :stroke-width="12"
                    color="#F4B259"
                  />
                  <div class="text">当周客户声音率</div>
                </div>
              </div>
              <div class="rate">
                <div class="text">环比上周</div>
                <div class="score flex">
                  <Score :show-text="false" />
                  <div>{{ SevenDayhonourdata.contrastVoice }}%↑</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getSevenDayhonourApi, getSevenDayFineApi, getSevenDayclaimApi
} from '@/api/QualityStatement'
export default {
  name: 'Statement2',
  data() {
    return {
      SevenDayhonourdata: null,
      SevenDayFinedata: null,
      SevenDayclaimdata: null
    }
  },
  computed: {},
  watch: {},
  created() {
    this.init()
  },
  methods: {
    init() {
      this.getSevenDayhonourData()
      this.getSevenDayFineData()
      this.getSevenDayclaimData()
    },
    async getSevenDayhonourData() {
      const res = await getSevenDayhonourApi()
      console.log('近七天 Honour', res)
      this.SevenDayhonourdata = res.data
    },
    async getSevenDayFineData() {
      const res = await getSevenDayFineApi()
      console.log('近七天罚款', res)
      this.SevenDayFinedata = res.data
    },
    async getSevenDayclaimData() {
      const res = await getSevenDayclaimApi()
      console.log('近七天赔付', res)
      this.SevenDayclaimdata = res.data
    }
  }
}
</script>
<style lang='scss' scoped>
.statement {
  padding: 30px 10px 30px 30px;
  width: 100%;
  height: 100%;
  background: #f5f5f5;

  .flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .title {
    font-weight: 400;
    font-size: 20px;
    color: #333333;
  }

  .data,
  .fine,
  .claim,
  .appoint {
    padding: 24px;
    height: 100%;
    background: #ffffff;
    box-shadow: 0px 2px 2px 0px rgba(113, 121, 144, 0.06);
    border-radius: 8px;
  }

  .el-progress {
    &::v-deep .el-progress__text {
      font-size: 20px !important;
    }
  }

  .up {
    height: 418px;

    .data {
      width: 796px;

      .chart {
        height: 360px;
      }
    }

    .fine {
      width: 1044px;
    }
  }

  .fine,
  .claim {
    .chart {
      width: 760px;
      height: 360px;
      border-right: 1px solid #ebecee;
    }

    .tips {
      margin-left: 20px;
      padding: 24px;
      width: 218px;
      height: 328px;
      background: #fafafa;
      border-radius: 8px;
      color: #333;

      .detail {
        margin: 18px auto 24px;
        width: 108px;
        height: 130px;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .text {
          color: #666;
        }
      }

      .item {
        .number {
          color: #2087d0;
        }
      }

      .item + .item {
        margin-top: 14px;
      }
    }
  }

  .down {
    margin-top: 20px;
    height: 456px;

    .claim {
      width: 1010px;

      .chart {
        width: 740px;
        height: 390px;
        border-right: none;
      }

      .tips {
        margin-left: 0;
      }
    }

    .appoint {
      width: 830px;

      .item {
        width: 254px;
        text-align: center;

        .title {
          margin: 32px 0 20px;
          font-size: 18px;
        }

        .chart {
          padding: 36px 16px;
          height: 306px;
          background: #fafafa;
          border-radius: 8px;
          border: 1px solid #ebecee;

          .flex > div {
            width: 100px;

            .text {
              margin-top: 20px;
              color: #666;
            }
          }

          .rate {
            margin-top: 28px;

            .text {
              margin-bottom: 12px;
              text-align: left;
              color: #666;
            }

            .score {
              .el-progress {
                width: 100%;
              }
            }
          }
        }
      }
    }
  }
}
</style>
